<!-- 递归渲染子级菜单 -->
<template>
    <template v-for="item in data">
        <el-sub-menu :index="item.path" v-if="item.children" :key="item.name" :disabled="item.isDisable">
            <template #title>
                <el-icon>
                    <component :is="item.icon"></component>
                </el-icon>
                <span>{{ item.title }}</span>
            </template>
            <menutree :data="item.children"></menutree>
        </el-sub-menu>
        <el-menu-item v-else :index="item.path" :key="item.name" :disabled="item.isDisable" @click="item.method">
             <template #title>
                 <el-icon>
                     <component :is="item.icon"></component>
                 </el-icon>
                 <span>{{ item.title }}</span>
             </template>
        </el-menu-item>
    </template>
</template>

<script>
    import menutree from '../../views/Home.vue'
    
    export default {
        name: 'menutree',
        components: {menutree},
        props: ['data'],
        data() {
            return {
                // 示例
                menu: [
                    {
                        path: '/home/index',  // 跳转的路径
                        title: '首页',   // 标题
                        icon: 'AlarmClock', // 图标
                        isDisable: true, // 是否禁用
                        children: [ // 子级
                            {
                                path: '/home/manage/index1',
                                title: '选项一',
                            },
                        ],
                        method: () => { // 点击的回调
                            console.log('123')
                        } 
                    },
                ]
            }
        },
        methods: {}
    }
</script>

<style lang="scss" scoped>
</style>
